@charset "UTF-8";
$menu-text-color: #343a40;
$menu-text-color-active: white;
#sidebar{
  min-width: 240px;
  max-width: 240px;
  height: 100vh;
  overflow: hidden;
  font-size: 1.1rem;
  box-shadow: black -10px 0 30px;
  @media (max-width: 576px) {
    min-width: 80vw;
    max-width: 80vw;
    position: fixed;
    top: 0;
    left: 0;
  }
  #userCard{
    #headImageBox{
      img{
        width: 60%;
      }
    }
  }
  #menuList{
    ul{
      padding: 0;
      list-style: none;
      //菜单样式
      &>li{
        position: relative;
        border-top: 1px solid #dee2e6;
        &:first-child{
          border-top: none;
        }
        &:last-child{
          border-bottom: 1px solid #dee2e6;
        }
        //有子菜单的菜单样式
        &.expansible{
          &>ul{
            transition: height 0.125s;
            overflow: hidden;
            height: 0;
          }
          &:after{
            content: ' ';
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: .17rem;
            border: black solid .3rem;
            border-left: none;
            border-bottom: none;
            border-radius: 2px;
            transform: rotateZ(45deg);
            transition: transform .125s;
          }
          &.expanded:after{
            transform: rotateZ(135deg);
          }
        }
        //菜单标题样式
        &>.title{
          display: block;
          padding: .5rem 0 .5rem 1rem;
          cursor: pointer;
          color: $menu-text-color;
          transition: padding-left .25s ease-out;
          &:hover{
            padding-left: 2rem;
          }
          &:active,&:focus{
            color: $menu-text-color;
          }
        }
        &.active{
          background-color: #0099ff;
          &>.title{
            color: $menu-text-color-active;
          }
        }
        //子菜单盒子样式
        &>ul{
          margin: 0 -15px;
          padding: 0 15px;
          box-shadow: 0 0 30px -10px black inset;
        }
      }
    }
  }
}
